<template>
  <el-dialog
    v-model="dialogVisible"
    title="标签成员"
    width="1000"
    class="qc-custom-dialog dialog-wrap"
    :before-close="beforeClose"
  >
    <el-scrollbar class="dialog-scroll-wrap">
      <Table
        ref="tableDialogRef"
        :columns="data.columns"
        :toolbar="data.toolbar"
        :query="data.query"
        :params="{ id: data.id }"
        @get-list="getData"
      ></Table>
    </el-scrollbar>
  </el-dialog>
</template>

<script lang="ts" setup name="dialog-label-station">
import Table from '@/components/table/index.vue';
import {
  queryLabelStationList,
  EXPORT_LABELSTATIONLIST,
} from '@/service/apis/market';
import { STATION_STATUS_USE } from '@/utils/dictionaries';
import { getRegion, exportFile } from '@/utils/utils';

const tableDialogRef = ref();
let dialogVisible = ref(false);

// 获取省市区
getRegion().then((res: any) => {
  data.query[2].props.options = [...res];
});

const data = reactive({
  id: '',
  columns: [
    {
      prop: 'stationName',
      label: '充电站名称',
    },
    {
      prop: 'address',
      label: '充电站地址',
      // template: (row: any, index: number) => {
      //   return `${row.areaCodeName}${row.address}` || '--';
      // },
    },
    {
      prop: 'operatorName',
      label: '归属运营商',
    },
    {
      prop: 'areaCodeName',
      label: '区划',
    },
    {
      prop: 'chargeTimes',
      label: '充电次数',
      template: (row: any, index: number) => {
        return row.chargeTimes || '0';
      },
    },
    {
      prop: 'isEnableStart',
      label: '启停状态',
      dic: STATION_STATUS_USE,
      type: Boolean,
    },
  ],
  query: [
    {
      label: '电站名称',
      prop: 'stationName',
      comName: 'input',
      props: {
        placeholder: '请输入电站名称',
      },
    },
    {
      label: '归属运营商',
      prop: 'operatorName',
      comName: 'input',
      props: {
        placeholder: '请输入归属运营商',
      },
    },
    {
      label: '区划',
      prop: 'regions',
      comName: 'cascader',
      props: {
        placeholder: '请选择区划',
        options: [] as any,
        props: {
          checkStrictly: true,
        },
      },
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'labelList.export',
      icon: 'icon-export',
      type: 'primary',
      handle: (row: any) => {
        const form = tableDialogRef.value?.getForm();
        delete form.provinceCode;
        delete form.cityCode;
        delete form.areaCode;
        delete form.id;
        if (form.regions?.length === 1) {
          form.provinceCode = form.regions[0];
        }
        if (form.regions?.length === 2) {
          form.provinceCode = form.regions[0];
          form.cityCode = form.regions[1];
        }
        if (form.regions?.length === 3) {
          form.provinceCode = form.regions[0];
          form.cityCode = form.regions[1];
          form.areaCode = form.regions[2];
        }
        form.labelId = data.id;
        exportFile(EXPORT_LABELSTATIONLIST, '标签成员', form);
      },
    },
  ],
});

const getData = (page: any = { pageNo: 1, pageSize: 10 }, search: any = {}) => {
  const form = search.ruleForm || {};
  delete form.provinceCode;
  delete form.cityCode;
  delete form.areaCode;
  if (form.regions?.length === 1) {
    form.provinceCode = form.regions[0];
  }
  if (form.regions?.length === 2) {
    form.provinceCode = form.regions[0];
    form.cityCode = form.regions[1];
  }
  if (form.regions?.length === 3) {
    form.provinceCode = form.regions[0];
    form.cityCode = form.regions[1];
    form.areaCode = form.regions[2];
  }
  form.labelId = data.id;
  queryLabelStationList(form, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getData(page, search);
        return;
      }
      nextTick(() => {
        tableDialogRef.value?.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
};

const show = (row: any) => {
  data.id = row.id;
  dialogVisible.value = true;
  tableDialogRef.value?.clearData();
  getData();
};

const beforeClose = (done: any) => {
  tableDialogRef.value.handleReset1();
  done();
};

defineExpose({
  show,
});
</script>